<template>
  <div
    class="article-container"
    :style="route.path === '/' ? 'margin-top: 30px' : 'margin-top: 70px'"
    v-if="data?.length && data.length"
  >
    <Sort @sort="getData" />
    <template v-for="article in data">
      <ArticleCard :article="article" />
    </template>
  </div>
  <div v-else class="article-container">
    <h1 class="not-data">暂无数据，快来编写一下文章吧 ~</h1>
  </div>
  <InfoNav></InfoNav>
</template>

<script setup lang="ts">
import { ref, watch, onActivated } from "vue";
import { useRoute } from "vue-router";
import { getAllArticleService } from "@/service/article";
import InfoNav from "./InfoNav.vue";

import ArticleCard from "@/components/ArticleCard/ArticleCard.vue";
import Sort from "@/components/Sort/Sort.vue";
import { IArticle } from "./config";

const route = useRoute();
const data = ref<IArticle[]>([]);

// 获取搜索页面和主页面的文章数据
const getData = async (current = 0) => {
  const res: any = await getAllArticleService(current);
  console.log(res, "首页请求数据");
  data.value = res.data?.articles;
};
onActivated(() => {
  getData();
});
// watch(
//   () => route.path,
//   () => {
//     getData();
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// );
</script>

<style scoped lang="less">
.article-container {
  // width: 100%;
  // margin: 20px 0;
  padding: 0 20px 15px;
  margin-left: -50px;
  .article-item:nth-child(2) {
    margin-top: 5px !important;
  }
}
</style>
